<template>
	<view class="container">
		<!-- 提交加载 开始-->
		<u-loading-page :loading="pageLoading" loading-mode="spinner" loading-color="#FFFFFF" icon-size="36" font-size="12" color="#FFFFFF" loading-text="Loading···" bg-color="#00000050"></u-loading-page>
		<!-- 提交加载 结束-->
		<view class="main">
			<view class="mainTitle">
				<text>发送验证码到手机号</text>
			</view>
		<!-- 	<view class="mainNum">
				<u--text mode="name" :text="18633669488" format="encrypt" bold='true' color='#333333' size='32'></u--text>
			</view> -->
			<view class="mainInput">
				<view class="caseInput-code">
					<input type="text" v-model="formData.phoneNumber" maxlength="11" class="inp-code" placeholder="请输入手机号"
						placeholder-class="title_input" />
				</view>
			</view>
			<view class="mainInput">
				<view class="caseInput-code">
					<input type="password"  v-model="formData.code"  class="inp-code" placeholder="请输入验证码"
						placeholder-class="title_input" />
					<text @click="getCode" :disabled="isCountingDown" maxlength="6" class="codeBtn">{{ countDownText }}</text>
				</view>
			</view>
			<view class="mainInput">
				<view class="caseInput-code">
					<input type="password" v-model="formData.newPassWd" maxlength="12" onKeyUp="value=value.replace(/[\W]/g,'')" class="inp-code" placeholder="请输入新密码"
						placeholder-class="title_input" />
				</view>
				<view class="caseInput-code mt20">
					<input type="password"  v-model="formData.confirmPassWd" maxlength="12" onKeyUp="value=value.replace(/[\W]/g,'')" class="inp-code" placeholder="请再次确认密码"
						placeholder-class="title_input" />
				</view>
			</view>
			<view class="mainInfo">
				<text>密码可由数字和字母组合，不可使用特殊符号，密码长度为6-12位。</text>
			</view>
		</view>
		<view class="footCase">
			<view v-show="isCountingDown" class="footInfo">
				<u-transition :show="isCountingDown" mode="fade-down">
					<!-- <text v-show="!csdeState" class="footInfo1">验证码错误</text> -->
					<text v-show="csdeState" class="footInfo2">验证码已发送</text>
				</u-transition>
			</view>
			<view class="footBtn" @click="SubmitEvent">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import {getPhoneCode,updatePasswdByCode} from '../api/index.js'
	export default {
		data() {
			return {
				pageLoading:false,
				formData:{},
				csdeState: false,
				phoneNum: '',
				mima: '',
				code: '',
				isCountingDown: false,
				countDownSeconds: 60,
				countDownText: '获取验证码'
			}
		},
		methods: {
			go() {
				uni.navigateTo({
				  url: '/src/views/pageMine/xiugaimima/wangjimima/shezhimima/index'
				});
			},
			// 获取验证码
			getCode() {
				if(this.formData.phoneNumber){
					getPhoneCode({phoneNumber:this.formData.phoneNumber}).then(response => {
					  console.log(response)
					  if (response.code === 0) {
						   if (!this.isCountingDown) {
								this.isCountingDown = true;
								this.countDown();
						   }
						}
					})
				}else{
					 uni.$u.toast('请输入手机号') 
				}
				
			 
			},
			//确定
			SubmitEvent(){
			  //接口后期打开
				updatePasswdByCode(this.formData).then(response => {
				  console.log(response)
				  if (response.code === 0) {
					  uni.showToast({
						  title:response.msg,
						  icon: 'success',
						  duration: 2000,
						  complete: () => {
							uni.reLaunch({
								url: '/src/views/pageMain/pageLogin/index'
							});
						  }
						});
				  }else{
					 uni.$u.toast(response.msg) 
				  }
				 })
			},
			// 获取验证码倒计时
			countDown() {
				let timer = setInterval(() => {
					if (this.countDownSeconds > 0) {
						this.countDownSeconds--;
						this.countDownText = `${this.countDownSeconds} 秒后重新获取`;
					} else {
						clearInterval(timer);
						this.isCountingDown = false;
						this.countDownSeconds = 60;
						this.countDownText = '获取验证码';
					}
				}, 500);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";

	.container {
		position: relative;
		background-color: #F0F0F0;
		height: 100vh;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mt20{
		margin-top: 20rpx;
	}
	.mainInfo{
		font-weight: 400;
		font-size: 24rpx;
		color: #808080;
		padding: 40rpx;
		line-height: 30rpx;
		// margin-top: 50rpx;
	}
	.main {
		width: 650rpx;
		height: 550rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin-top: -30%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.mainTitle {
		font-weight: 400;
		font-size: 24rpx;
		color: #808080;
		margin-top: 80rpx;
		line-height: 30rpx;
		margin-bottom: 25rpx;
	}

	.mainNum {
		line-height: 30rpx;
		margin-bottom: 30rpx;
	}

	.mainInput {
		margin-top: 20rpx;
	}

	.caseInput-code {
		width: 460rpx;
		height: 56rpx;
		background: #FFB607;
		border-radius: 27rpx;
		display: flex;
		align-items: center;
	}

	.inp-code {
		width: 60%;
		height: 56rpx;
		border-radius: 28rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFF38B;
	}

	.codeBtn {
		width: 40%;
		height: 53rpx;
		background: #FFFFFF;
		border-radius: 26rpx;
		margin-right: 3rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 20rpx;
		color: #FF9907;
		line-height: 53rpx;
	}

	::v-deep.title_input {
		color: #FFF38B;
	}

	.footCase {
		margin-top: 40%;
	}

	.footInfo {
		text-align: center;
		margin-bottom: 10rpx;
	}
	.footInfo1{
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #FF8106;
		line-height: 30rpx;
	}
	.footInfo2{
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #808080;
		line-height: 30rpx;
	}
	.footBtn {
		width: 650rpx;
		height: 80rpx;
		background: #FF8106;
		border-radius: 27rpx;
		text-align: center;
		
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 80rpx;
	}
</style>